import React, { useRef, useState } from 'react';
import { ActionType, ProColumns, ProFormInstance, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import { getLogManageLossList } from '../request';
import ModalDialog from '@/pages/ChecknHistory/components/ModalDialog';
import { useIntl } from '@umijs/max';
export const waitTimePromise = async (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export const waitTime = async (time: number = 100) => {
  await waitTimePromise(time);
};

// 定义表格数据源类型
export type GithubIssueItem = any;

const manage: React.FC = () => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const actionRef = useRef<ActionType>();
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const ref = useRef<ProFormInstance>();

  // 控制对话框显示隐藏
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [visible, setVisible] = useState(false);

  // 对话框展示的那一行数据信息
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [form, setForm] = useState<GithubIssueItem | null>(null);

  // 操作按钮---弹框展示信息
  const operate = (record: GithubIssueItem) => {
    setForm(record);
    setVisible(true);
  };
  const intl = useIntl()
  // const readCard = () => {
  //   ref.current?.setFieldsValue({ cardNum: 'IUDS090' });
  // };

  // 表格数据--列展示信息
  const columns: ProColumns<GithubIssueItem>[] = [
    {
      title: '序号',
      dataIndex: 'inedx',
      valueType: 'index',
      width: 60,
    },
    // {
    //   title: (
    //     <Button type="primary" onClick={readCard}>
    //       读卡
    //     </Button>
    //   ),
    //   dataIndex: 'cardNum',
    //   hideInTable: true,
    //   valueType: 'text',
    //   key: 'cardNum',
    // },
    {
      title: intl.formatMessage({id:"Administer.number"}),
      dataIndex: 'cardNum',
      hideInTable: true,
      valueType: 'text',
      key: 'cardNum',
    },
    {
      title: intl.formatMessage({id:"Administer.cardholder"}),
      dataIndex: 'cardHolder',
    },
    {
      title: intl.formatMessage({id:'Administer.Card type'}),
      dataIndex: 'cardType',
      search: false,
      valueType: 'select',
      valueEnum: {
        2: {
          text: intl.formatMessage({id:"Administer.Total card"}),
        },
        3: {
          text: intl.formatMessage({id:"Administer.Building card"}),
        },
        4: {
          text: intl.formatMessage({id:"Administer.Layer control card"}),
        },
        6: {
          text: intl.formatMessage({id:"Administer.Emergency card"}),
        },
        7: {
          text: intl.formatMessage({id:"Administer.Hygiene card"}),
        },
        8: {
          text: intl.formatMessage({id:"Administer.Always-on card"}),
        },
        18: {
          text: intl.formatMessage({id:"Administer.Authorization card"}),
        },
        10: {
          text: intl.formatMessage({id:"Administer.Employee card"}),
        },
        11: {
          text: intl.formatMessage({id:"Administer.Access control card"}),
        },
      },
    },
    {
      title: intl.formatMessage({id:"Administer.Expiration date"}),
      dataIndex: 'expirationDate',
      search: false,
    },
    {
      title: intl.formatMessage({id:"Administer.Card issuance time"}),
      dataIndex: 'issuingTime',
      search: false,
    },
    {
      title:intl.formatMessage({id:"Administer.Lost Reporting Time"}),
      dataIndex: 'lossTime',
      search: false,
    },
    {
      title:intl.formatMessage({id:"Administer.Lost Reporting Time"}),
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            issuing_start_time: value[0],
            issuing_end_time: value[1],
          };
        },
      },
    },
    {
      title: intl.formatMessage({id:"Administer.number"}),
      dataIndex: 'cardNum',
      search: false,
    },
    {
      title:intl.formatMessage({id:"Administer.Building"}),
      dataIndex: 'buildingName',
      search: false,
    },
    {
      title: intl.formatMessage({id:"Administer.Floor"}),
      dataIndex: 'floor',
      search: false,
    },
    {
      title: intl.formatMessage({id:"Administer.Card issuer"}),
      dataIndex: 'createdBy',
      search: false,
    },
    // {
    //   title: '操作',
    //   valueType: 'option',
    //   key: 'option',
    //   search: false,
    //   width: '200px',
    //   // eslint-disable-next-line @typescript-eslint/no-unused-vars
    //   render: (_text: any, record: GithubIssueItem) => (
    //     <>
    //       <Button
    //         type="link"
    //         onClick={() => {
    //           operate(record);
    //         }}
    //       >
    //         查看
    //       </Button>
    //     </>
    //   ),
    // },
  ];
  return (
    <>
      <ProTable<GithubIssueItem>
        defaultSize={'large'}
        columns={columns}
        formRef={ref}
        actionRef={actionRef}
        cardBordered={false}
        pagination={{
          defaultPageSize: 10,
          showSizeChanger: true,
        }}
        request={async (params) => {
          await waitTime(500);
          const res: any = await getLogManageLossList({
            ...params,
            page: params.current,
          });
          return {
            data: res.data.list || [],
            success: res.code === 0 ? true : false,
            total: res.data.totalCount,
          };
        }}
        rowKey="id"
        search={{ labelWidth: 'auto' }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        dateFormatter="string"
      />
      {visible && (
        <ModalDialog
          visible={visible}
          close={() => {
            setVisible(false);
          }}
          form={form}
        />
      )}
    </>
  );
};

export default manage;
